<template>
  <el-dialog
    :title="textMap[dialogStatus]"
    width="720px"
    :visible.sync="dialogFormVisible"
    :close-on-click-modal="false"
  >
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="form"
      label-position="right"
      label-width="100px"
      v-loading="confirmLoading"
    >
      <el-form-item label="考试名称" prop="period">
        <el-input placeholder="请输入考试名称" v-model="form.period"></el-input>
      </el-form-item>
      <el-form-item label="考试时间" required style="margin-bottom: 0">
        <el-col :span="11">
          <el-form-item prop="startTime">
            <el-date-picker
              type="datetime"
              format="yyyy-MM-dd HH:mm"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="开始日期"
              v-model="form.startTime"
              style="width: 100%;"
              :picker-options="pickerOptionsStart"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-form-item prop="endTime">
            <el-date-picker
              type="datetime"
              format="yyyy-MM-dd HH:mm"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="结束日期"
              v-model="form.endTime"
              style="width: 100%;"
              :picker-options="pickerOptionsEnd"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="选择题库" prop="qusLibIds">
        <el-select
          multiple
          v-model="form.qusLibIds"
          style="width: 100%"
          placeholder="请选择题库"
        >
          <el-option
            v-for="item in qusLibList"
            :key="item.id"
            :label="item.libName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="随机抽题" prop="random">
        <el-radio-group v-model="form.random">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-divider>规则设置</el-divider>
      <el-form-item label="添加题型" prop="qusTypes">
        <el-select
          multiple
          v-model="form.qusTypes"
          placeholder="请选择题型"
          style="width: 100%"
          @change="qusTypesChange"
        >
          <el-option
            v-for="item in qusTypeList"
            :key="item.id"
            :label="item.name"
            :value="item.key"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        v-for="(item, index) in form.examQusList"
        :key="item.qusType"
        :label="item.qusTypeDesc"
        required
        style="margin-bottom:0"
      >
        <el-col :span="11">
          <el-form-item
            :prop="'examQusList.' + index + '.qusNum'"
            :rules="{
              required: true,
              message: '单选题目数量不能为空',
              trigger: 'blur'
            }"
          >
            <el-input placeholder="数量" type="number" v-model="item.qusNum">
              <span slot="prepend">数量</span>
              <span slot="append">个</span>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-form-item
            :prop="'examQusList.' + index + '.qusScore'"
            :rules="{
              required: true,
              message: '单选单个题目分值不能为空',
              trigger: 'blur'
            }"
          >
            <el-input
              placeholder="单个分值"
              type="number"
              v-model="item.qusScore"
            >
              <span slot="prepend">单个分值</span>
              <span slot="append">分</span>
            </el-input>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="满分" prop="totalScore">
            <el-input
              readonly
              placeholder="满分"
              type="number"
              v-model="form.totalScore"
            >
              <span slot="append">分</span>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">
        取消
      </el-button>
      <el-button type="primary" @click="submitForm">
        确认
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import formMixin from "@/mixins/form";
import request from "@/utils/request";
export default {
  name: "Dialog",
  mixins: [formMixin],
  components: {},
  data() {
    return {
      textMap: {
        update: "其它考试设置",
        create: "其它考试设置"
      },
      rules: {
        period: [
          {
            required: true,
            message: "请设置考试期数名称",
            trigger: "blur"
          }
        ],
        examDate: [
          {
            required: true,
            message: "请选择考试的日期",
            trigger: "change"
          }
        ],
        startTime: [
          {
            required: true,
            message: "请选择考试开始时间",
            trigger: "change"
          }
        ],
        endTime: [
          {
            required: true,
            message: "请选择考试结束时间",
            trigger: "change"
          }
        ],
        qusLibIds: [
          {
            required: true,
            message: "请选择考试题库",
            trigger: "change"
          }
        ],
        random: [
          {
            required: true,
            message: "请选择是否随机抽题",
            trigger: "change"
          }
        ],
        qusTypes: [
          {
            required: true,
            message: "请添加考试题目类型",
            trigger: "change"
          }
        ],
        totalScore: [
          {
            required: true,
            message: "请输入满分分值",
            trigger: "blur"
          }
        ],
        passScore: [
          {
            required: true,
            message: "请输入及格分值",
            trigger: "blur"
          }
        ]
      },
      qusLibList: [],
      qusTypeList: [],
      Urls: {
        qusLibListUrl: "/api/question/lib/list",
        addUrl: "/api/exam/other/insert",
        editUrl: "/api/exam/update/",
        getByIdUrl: "/api/exam/detail/get/"
      }
    };
  },
  computed: {},
  watch: {
    "form.examQusList": {
      handler(newVal, oldVal) {
        if (newVal.length > 0) {
          let total = 0;
          this.form.examQusList.map(item => {
            total = total + (item.qusNum || 0) * (item.qusScore || 0);
          });
          this.form.totalScore = total;
        }
      },
      deep: true
    }
  },
  methods: {
    beforeOpen() {
      this.getQusLibList();
      this.getDictList("qus_type", "qusTypeList");
      console.log("lala", this.form.examQusList);
    },
    resetForm() {
      this.form = {
        examQusList: [
          /* { qusType: "choice", quaLabel: "单选", qusNum: 50, qusScore: 1 },
          { qusType: "judge", quaLabel: "判断", qusNum: 50, qusScore: 1 } */
        ]
      };
    },
    fillForm(data) {
      this.form.qusLibIds = data.qusLibIds.split(",");
      this.form.qusTypes = this.form.examQusList.map(item => {
        return item.qusType;
      });
    },
    formatData(data) {
      let form = Object.assign({}, data);
      let ids = form.qusLibIds;
      let arr = this.qusLibList,
        names = [];
      for (let i = 0; i < arr.length; i++) {
        for (let j = 0; j < ids.length; j++) {
          if (ids[j] == arr[i].id) {
            names.push(arr[i].libName);
          }
        }
      }
      form.qusLibIds = ids.join(",");
      form.qusLibNames = names.join(",");
      return form;
    },
    // 题型选择
    qusTypesChange(val) {
      this.form.examQusList = [];
      let names = [];
      for (let i = 0; i <= val.length - 1; i++) {
        this.qusTypeList.find((item, index) => {
          if (item.key == val[i]) {
            names.push(item.name);
            this.form.examQusList.push({
              qusType: item.key,
              qusTypeDesc: item.name,
              qusNum: 50,
              qusScore: 1
            });
          }
        });
      }
      console.log("qusTypesChange", names, this.form.examQusList);
    },
    // 获取题库
    getQusLibList() {
      request({
        url: this.Urls.qusLibListUrl,
        method: "get"
      })
        .then(res => {
          console.log("form list", res);
          if (res.code == 0) {
            this.qusLibList = res.data.records || [];
          } else {
            that.$notify({
              title: "提示",
              message: res.msg,
              type: "error",
              duration: 2000
            });
          }
        })
        .catch(err => {
          that.dialogFormVisible = false;
        });
    },
    getqusLibName(val) {
      console.log(val);
      let ids = val,
        arr = this.qusLibList,
        names = [];
      for (let i = 0; i < arr.length; i++) {
        for (let j = 0; j < ids.length; j++) {
          if (ids[j] == arr[i].id) {
            names.push(arr[i].libName);
          }
        }
      }

      /* let obj = this.qusLibList.find(item => {
        return item.id === val;
      }); */
      console.log("题库", names);
      this.form.qusLibNames = names.join(",");
    }
  },
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {}
};
</script>
<style lang="scss" scoped>
.line {
  text-align: center;
}
</style>
